<!--
 * @Description: 饼图-图例交互
 * @Author: xjc
 * @Date: 2022-06-21 14:16:57
 * @LastEditTime: 2022-06-21 14:18:48
 * @LastEditors: xjc
-->
<template>
  <div id="legend-interaction-container" />
</template>

<script setup>
import {onMounted} from 'vue'
// eslint-disable-next-line no-undef
const {Pie} = G2Plot

onMounted(() => renderLegendInteraction())

function renderLegendInteraction() {
  const data = [
    {type: '分类一', value: 27},
    {type: '分类二', value: 25},
    {type: '分类三', value: 18},
    {type: '分类四', value: 15},
    {type: '分类五', value: 10},
    {type: '其他', value: 5},
  ]
  const piePlot = new Pie('legend-interaction-container', {
    appendPadding: 10,
    data,
    angleField: 'value',
    colorField: 'type',
    radius: 0.8,
    label: {
      type: 'outer',
      content: '{name} {percentage}',
    },
    interactions: [{type: 'pie-legend-active'}, {type: 'element-active'}],
  })

  piePlot.render()
}
</script>
